<template>
  <div class="p18">
    <div class="p18-center-left" @click="isIframeLeft"></div>
    <div class="p18-center-right" @click="isIframeRight"></div>
        <div
            v-if="showIframe"
            class="iframe"
            draggable="true"
            @dragend="changePosition"
            v-clickoutside="closeIframe"
            :style="{'top':iframePosition.top+'px','left':iframePosition.left+'px'}"
        >
            <div class="iframe-title">
            <span>{{title}}</span>
            <span @click="isIframe">
                <Icon type="close"></Icon>
            </span>
            </div>
            <div style="display:flex;justify-content: center;align-items: center;">
            <iframe
                width="1360px"
                height="800px"
                :src="srcPath"
            ></iframe>
            </div>
    </div>
  </div>
</template>
<script>
import WOW from "wow.js";
import clickoutside from "../../assets/directives/clickoutside.js";
export default {
  name: "P18",
  created() {
    new WOW().init();
  },
  mounted() {
    document.addEventListener("keyup", this.changePage);
  },
  data() {
    return {
        srcPath:'',
        title:'',
        showIframe: false,
        iframePosition: {
            top: 150,
            left: 2100
        }
    };
  },
  methods: {
    changePage(e) {
      //右键
      if (e.keyCode == 40||e.keyCode==34) {
        this.$router.replace(`/ppt/p19`);
      }
      //左键
      if (e.keyCode == 38||e.keyCode==33) {
        this.$router.replace(`/ppt/p17`);
      }
    },
    isIframe(e) {
          this.showIframe = !this.showIframe;
          e.stopPropagation();
      },
      isIframeLeft(e){
        this.title = "数字化审计平台";
        this.srcPath = "http://digitalaudit.sgcc.com.cn/znsj_in/routingAdv/PubMenus/work_index/main";
        this.showIframe = !this.showIframe;
        e.stopPropagation();
      },
      isIframeRight(e){
        this.title = "差异化建设";
        this.srcPath = "http://10.210.6.152:19091/auditGc/u/login";
        this.showIframe = !this.showIframe;
        e.stopPropagation();
      },
      closeIframe(e) {
          this.showIframe = false;
          e.stopPropagation();
      },
      //改变位置
      changePosition(e) {
          this.iframePosition = {
              top: e.y,
              left: e.x
          };
      }
  },
  directives: { clickoutside },
  beforeDestroy() {
    document.removeEventListener("keyup", this.changePage);
  },
  watch: {
    $route: {
      handler(n, v) {
        document.addEventListener("keyup", this.changePage);
      },
      deep: true
    }
  }
};
</script>
<style lang="scss" scoped>
.p18 {
  background-image: url("../../assets/images/pptScreen/pFirst/18.png");
}
.p18-center-left {
    position: absolute;
    width: 608px;
    height: 486px;
    top: 400px;
    left: 2712px;
    cursor: pointer;
}
.p18-center-right {
    position: absolute;
    width: 673px;
    height: 486px;
    top: 400px;
    left: 3356px;
    cursor: pointer;
}
.iframe {
  width: 1400px;
  left:700px;
  position: absolute;
  background-color: #fff;
  z-index: 999;
  &-title {
    width: 100%;
    display: flex;
    justify-content: space-between;
    padding: 10px 20px;
    font-weight: bold;
  }
}
</style>